<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style></style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent
            num="1314"
            age="32"
            word="求求你们了,daydayup"
        ></parent>

    </div>

    <template id="parent">
        <div>
            <h2>parent = parent - 父组件 </h2>
            <h2>{{num}} -- {{age}} -- {{word}}</h2>
            <hr>
            <childone  
                v-bind:pro="pro"
                :city="city"
                :area="area"
                :address="address"
            ></childone>
            <hr>
            <childtwo
                :prop-a="1314"
                prop-b="2114-dayadyup"
                :prop-c="flag"
                prop-d="周六好好总结第一周Vue"
            ></childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>child-one = 1 </h2>
            <h2>地址是  {{pro}}-{{city}}-{{area}}-{{address}}</h2>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>child-two  = 2 </h2>
            <h2>我的props === {{propA }} - {{propB}} - {{propC}} - {{propD}} </h2>
        </div>
    </template>
    <script>
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        })
        // 全局注册 
        Vue.component("parent",{
            template:"#parent",
            data(){
                return {
                    pro:"湖北省",
                    city:"武汉市",
                    area:"江夏区",
                    address:"金融港B18",
                    flag:!!1
                }
            },
            props:['num','age','word'],  // 跟data 一样 不能修改 
            components:{
                childtwo:{
                    template:"#childtwo",
                    props:{
                        propA:Number,
                        propB:String,
                        propC:Boolean,
                        propD:[String,Number]
                    }
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:{
                pro:String,
                city:{
                    type:String,
                },
                area:{
                    type:[String,Number],
                    default:'null'
                },
                address:{
                    type:[String,Function],
                    default:''
                }
            }
        })
        const vm = new Vue({
            data:{
                title:"Vue component 组件传参(props)",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化 </h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        <A>
            <B></B>
        </A>
        props  组件接受的外部数据  

        通过 Prop 向子组件传递数据  单向数据流   

        props 属性   用来传递(父组件传给子组件)组件的参数 (动态&静态)   v-bind
        props 只能用来传递数据  不可以修改   
        动态props v-bind 
        静态props 没有 v-bind 

        props 驼峰命名   user-name="zuozuomu"

        props 校验  格式类型
        String    
        Number
        Boolean
        Array
        Object
        Date
        Function
        Symbol  符号
     -->
</body>
</html>